<template>
  <div class="main">
    <!-- 头部导航栏 -->
    <head-component :noBack="false"  title="实名认证"/>

    <div class="con">
      <div class="list">
        <span class="f32 col_33">姓     名</span>
        <input type="text" :disabled="disabled" v-model="userName" placeholder="请输入姓名"  class="f32 col_33">
      </div>
      <div class="list">
        <span  class="f32 col_33">身份证号</span>
        <input type="text" :disabled="disabled" v-model="userNum" placeholder="请输入身份证号"  class="f32 col_33">
      </div>
    </div>

    <div class="global_btn" v-if="!isRenzheng" @click="renzhengBtn">提交</div>
  </div>
</template>

<script>
import headComponent from '@/components/layout/head'
export default {
  name: "renzheng.vue",
  components: {
    headComponent
  },
  data(){
    return {
      userName: '',
      userNum: '',
      isRenzheng: false,  // 1-成功 0-没有
      disabled: false,
    }
  },
  mounted() {
    this.getNews()
  },
  methods: {
    // 获取用户信息
    getNews(){
      let isVip = localStorage.getItem("isVip");
      let renzheng = localStorage.getItem("isRenzheng");
      if(renzheng == 1){
        let $this = this;
        let uid = localStorage.getItem('uid');
        let token = localStorage.getItem('token');
        this.disabled = true;
        this.isRenzheng = true;
        var data = {u_id: uid,token:token};
        $this.$axios.post('/index.php?m=user&c=index',data).then((res) => {
          if(res.data.code == 1){
            $this.userName = res.data.user.m_zsxm;
            $this.userNum = res.data.user.m_carid;
          }else{
            $this.$toast({
              message: res.data.msg,
              duration: 800
            })
          }
        })
      };
    },
    renzhengBtn(){
      let uid = localStorage.getItem("uid");
      let token = localStorage.getItem("token");
      let renzheng = localStorage.getItem("isRenzheng");
      let $this = this;
      if (renzheng == 0){
        if($this.userName.length == 0) {
          this.$toast({
            message: '用户名不能为空',
            duration: 800
          });
          return;
        }else if(!/^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/.test($this.userName)){
          this.$toast({
            message: '姓名格式不正确',
            duration: 800
          });
          return;
        } else if (!/^\d{6}(19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test($this.userNum)){
          this.$toast({
            message: '请输入正确的身份证号',
            duration: 800
          });
          return;
        }
        let data = { u_id:uid, token:token, zsxm:$this.userName, carid:$this.userNum };
        $this.$axios.post('index.php?m=user&c=renzheng', data).then( res => {
          if(res.data.code === 1){ // 0未认证 1已认证
            this.$toast({
              message: '实名认证成功',
              duration: 800,
              onClose:()=>{
                $this.$router.back()
              }
            });
            localStorage.setItem('isRenzheng',1)
          } else {
            this.$toast({
              message: res.data.msg,
              duration: 800
            });
          }
        })
      }

    }
  }
}
</script>

<style scoped  lang="less">
  .layout-head{border-bottom: 0.02rem solid #f5f5f5;}
  .con{
    margin: 1.8rem auto 0;width: 90%;
    .list{width: 100%;height: 1.3rem;line-height: 1.3rem; margin-bottom:0.533rem; position: relative;border-radius: 0.16rem;
      box-shadow:0px 0px 14px #e9e9e9;background: #fff;
      span{
        float: left;
        margin-left: 0.4rem;
        width: 2.2rem;
      }
      input{width:70%; height: 1.2rem;color: #999;float: left;line-height: 1.3rem;}
    }
  }
  .global_btn{width: 90%;margin: 1rem auto 0;}
</style>
